<script>
import echarts from "@/utils/echarts";
import {getIncorrectCount} from "@/api/charts";

export default {
  name: 'PolylineChart',
  data() {
    return {
      option: {
        title: {
          text: '单词错误次数统计（前20个）',
          left: 'center',
          top: 10,
          textStyle: {
            color: '#333',
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        backgroundColor: '#ffffff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: '#aaa',
              width: 1
            }
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '8%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            // 关键配置：
            interval: 0, // 强制显示所有标签
            rotate: 45, // 倾斜角度加大
            fontSize: 12,
            color: '#333',
            formatter: function(value) {
              // 超过10个字符的单词显示省略号
              return value.length > 10 ? value.substring(0,8) + '...' : value;
            }
          },
          axisTick: {
            alignWithLabel: true // 保证刻度线和标签对齐
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#eee',
              type: 'dashed'
            }
          },
          axisLabel: {
            color: '#333'
          }
        },
        series: [
          {
            name: '错误次数',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            data: [],
            lineStyle: {
              color: '#5470C6',
              width: 3,
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 8,
              shadowOffsetY: 4
            },
            itemStyle: {
              color: '#5470C6',
              borderColor: '#fff',
              borderWidth: 2
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: 'rgba(84,112,198,0.4)'},
                {offset: 1, color: 'rgba(84,112,198,0)'}
              ])
            },
            animationDuration: 1500,
            animationEasing: 'cubicOut'
          }
        ]
      }
    }
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.main
      if (!chartDom) return;


      this.myChart = echarts.init(chartDom)
      this.myChart.setOption(this.option)
    },

    /**
     * 获取数据
     */
    getIncorrectCount() {
      getIncorrectCount().then(res => {
        const dataList = res.data.data
        const x = []
        const y = []
        for (let i = 0; i < dataList.length; i++) {
          const data = dataList[i]
          x.push(data.word)
          y.push(data.incorrectCount)
        }

        this.option.xAxis.data = x
        this.option.series[0].data = y

        if (this.myChart) {
          this.myChart.setOption(this.option)
        }
      }).catch(res => {
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
      this.getIncorrectCount()
    })
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose()
    }
  }
}
</script>

<template>
  <div>
    <div class="polyline" ref="main" style="width: 100%; height: 500px;"></div>
  </div>
</template>

<style scoped>
.polyline {
  margin-top: 50px;
}
</style>
